<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=request.getContextPath()+"/"%>">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="bootstrap-3.4.1/dist/css/bootstrap.cs">


    <script type="text/javascript" src="js/jquery.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="bootstrap-3.4.1/dist/js/bootstrap.js"></script>


    <script type="text/javascript">
        $(function () {
            //部门的初始化（发送请求到服务器端获取数据，把数据动态添加到页面）
            initDept();

            //给表单绑定一个点击事件
            $("#user-add-form").submit(function () {
                console.log("用户点击了表单提交")

                //1、获取表单数据
                var formData = $("#user-add-form").serializeArray();
                var param = new Object();

                for (var i = 0; i<formData.length; i++){
                    var name = formData[i].name;
                    var value = formData[i].value;
                    // [name]作为对象属性名称，value作为属性值
                    param[name] = value;// param.name="admin",param.age="age"
                }
                //2、转成JSON字符串
                var json = JSON.stringify(param);

                //3、发ajax请求
                $.ajax({
                    url: "http://localhost:8080/EmpServlet/addEmpAsync",
                    type: "POST",
                    data: json,
                    contentType: "application/json",
                    dataType: "json",
                    success: function (data) {
                        if (data.code == 200) {
                            location.href = "http://localhost:8080/EmpServlet/list"
                        }
                    }
                });
                // 这里返回false表单不会自动提交了
                return false;
            });
        })

        function initDept() {
            // 1.发送请求
            $.ajax({
                url: "http://localhost:8080/DeptServlet/list",
                type: "GET",
                dataType: "json", // 期望服务端返回的数据是JSON
                success: function (data) {
                    // console.log("dept:", data);

                    // 1、先找到部门的下拉框的元素对象
                    var deptnoEle = $("#deptno");

                    // 2、遍历数组，动态的把部门追加到下拉框里面
                    $.each(data, function (index, item) {
                        // // 3.创建一个option对象，它js对象无法使用text()和val(),所以需要把JS对象转成JQuery对象
                        var option = $(document.createElement("option"));
                        option.val(item.deptno);
                        option.text(item.dname);

                        // 4.把option添加到下拉框里面
                        deptnoEle.append(option);

                    })
                }
            });
        }


    </script>
</head>
<body>

<form class="form-horizontal" id="user-add-form" method="post">
    <table border="1">
        <div class="form-group">
            <label for="ename" class="col-sm-2 control-label">姓名</label>
            <div class="col-sm-2">
                <input type="text" class="form-control" id="ename" name="ename" value="admin">
            </div>
        </div>
        <div class="form-group">
            <label for="sal" class="col-sm-2 control-label">工资</label>
            <div class="col-sm-2">
                <input type="text" class="form-control" id="sal" name="sal" value="13000.0">
            </div>
        </div>
        <div class="form-group">
            <label for="comm" class="col-sm-2 control-label">奖金</label>
            <div class="col-sm-2">
                <input type="text" class="form-control" id="comm" name="comm" value="1000.0">
            </div>
        </div>
        <div class="form-group">
            <label for="job" class="col-sm-2 control-label">职位</label>
            <div class="col-sm-2">
                <input type="text" class="form-control" id="job" name="job" value="Java高级开发工程师">
            </div>
        </div>
        <div class="form-group">
            <label for="mgr" class="col-sm-2 control-label">领导</label>
            <div class="col-sm-2">
                <input type="text" class="form-control" id="mgr" name="mgr" value="7369">
            </div>
        </div>

        <div class="form-group">
            <label for="deptno" class="col-sm-2 control-label">部门</label>
            <div class="col-sm-2">
            <select class="form-control" name="deptno" id="deptno"></select>
            </div>
        </div>

        <div class="form-group">
            <label for="hiredate" class="col-sm-2 control-label">入职时间</label>
            <div class="col-sm-2">
                <input type="date" class="form-control" id="hiredate" name="hiredate" value="2022-11-23">
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">添加</button>
            </div>
        </div>

    </table>

</form>
</body>
</html>
